<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../utils/vue.min.js">
	</script>
	<body>
		<div id="app">
			<p>----------------v-for--------------------</p>
			<button @click="add()">add</button>
			<button @click="del()">del</button>
			<!-- <p v-for="item in list">{{item}}</p> -->
			<li v-for="item in list">{{item}}</li>
			<p></p>
			<li v-for="(item, index) in list">{{index+1}} : {{item}}</li>
			
			<p>----------------v-on 补充--------------------</p>
			<button type="button" @click="doIt('双双')">传递自定义参数</button>
			<!-- <p>事件修饰符</p> -->
			<p>只有按下enter建后才触发函数</p>
			<input @keyup.enter ="sayHi" />
			
			<p>----------------v-model--------------------</p>
			<button type="button" @click="setMsg" >修改message值</button>
			<input v-model="message"/>
			<p>message: {{message}}</p>
		</div>
	</body>
	
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				list:["shuangshuang","Lily","Lucy","Alice","Jina"],
				// ----------------v-model--------------------
				message:"message"
			},
			methods:{
				// ----------------v-for--------------------
				add:function(){
					this.list.push("Nana");
				},
				del:function(){
					this.list.shift();
				},
				// ----------------v-on 补充--------------------
				doIt:function(param){
					console.log(param + "最棒！！！");
				},
				sayHi:function(){
					alert("吃了吗？");
				},
				// ----------------v-model--------------------
				setMsg:function(){
					this.message = "new msg!";
				}
			}
		})
	</script>
</html>
